var Canvas = function(_board, _jqCanvas)
{
    this.board              = _board;
    this.jqCanvas           = _jqCanvas;
    this.canvasWidth        = null;
    this.canvasHeight       = null;
    this.gameDivIndWidth    = null;
    this.gameDivIndHeight   = null;
    this.boardPositionWidth = null;
    this.boardPositionHeight = null;
}

Canvas.prototype.getEventDevIndPosition = function(event)
{
    var xPos = event.pageX - this.jqCanvas.offset().left;
    var yPos = event.pageY - this.jqCanvas.offset().top;

    var positionX = Math.floor(xPos / this.boardPositionWidth);
    var positionY = Math.floor(yPos / this.boardPositionHeight);
    
    var position = new Array(2);
    position[0] = positionX;
    position[1] = positionY;
    return position;
}

Canvas.prototype.setupLayout = function()
{
    var domCanvas      = (this.jqCanvas)[0];
    var context         = domCanvas.getContext("2d");
    
    this.canvasWidth         = this.jqCanvas.attr("width");
    this.canvasHeight        = this.jqCanvas.attr("height");
    this.gameDivIndWidth     = 3;                                           // TODO: retrive from the Game object.
    this.gameDivIndHeight    = 3;                                           // TODO: retrive from the Game object.
    this.boardPositionWidth  = this.canvasWidth  / this.gameDivIndWidth;
    this.boardPositionHeight = this.canvasHeight / this.gameDivIndHeight;
    
    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    context.beginPath();
    
    for (var x = this.boardPositionWidth + 0.5; x < this.canvasWidth; x += this.boardPositionWidth)
    {
        context.moveTo(x, 0);
        context.lineTo(x, this.canvasHeight);
    }

    for (var y = this.boardPositionHeight + 0.5; y < this.canvasHeight; y += this.boardPositionHeight)
    {
        context.moveTo(0, y);
        context.lineTo(this.canvasWidth, y);
    }

    context.strokeStyle = colorBlack;
    context.stroke();
}

Canvas.prototype.setupClick = function()
{
    this.jqCanvas.click
    (
        function(event)
        {
            tictactoeController.uiMoveAtLocation(event);   
        }
    );
}

/* 
 * Todo: use jquery events insted of DOM events.
 */
Canvas.prototype.setupDND = function()
{
    var currentPlayerImage = $("img#currentPlayerSymbol")[0];
    currentPlayerImage.ondragstart = function(event)
    {
        if (tictactoeController.game.isStopped() && event.preventDefault)
        {
            event.preventDefault();
            return;
        }

        event = event || window.event;
        event.dataTransfer.setData('Text', this.src);
    }

    var domCanvas = (this.jqCanvas)[0];
    domCanvas.ondrop = function(event)
    {
        event = event || window.event;

        if (event.preventDefault)
            event.preventDefault();

        tictactoeController.uiMoveAtLocation(event);   

        event.cancelBubble = true;
        return false;
    }

    domCanvas.ondragover = function()
    {
        return false;
    }

    // Handle the IE event model.
    domCanvas.ondropenter = function()
    {
        return false;
    }
}